<template>
  <div class="app-car-container">
    <CustomContent>
      <template v-slot:body>

        <el-card class="box-card">
          <div slot="header" class="cardHeader">
            <span class="cardTitle">{{contractInfo.businessType|contractType}}</span>
            <div v-if="contractInfo.contractSource==2">
              <el-button v-if="contractInfo.contractStatus==1"  type="primary"
                         @click="handleOperate(2)">出租方补署
              </el-button>
              <el-button v-if="contractInfo.contractStatus==2"  type="primary"
                         @click="handleOperate(3)">承租方补署
              </el-button>
              <el-button v-if="contractInfo.contractStatus<=2"  type="info"
                         @click="handleOperate(0)">废弃
              </el-button>
            </div>
          </div>
          <div>
            <el-descriptions :column="4" v-if="contractInfo.contractSource==2">
              <el-descriptions-item label="合同编号">
                {{ contractInfo.contractNo }}
              </el-descriptions-item>
              <el-descriptions-item label="出租方签署">
                {{ contractInfo.enterpriseCertificationName }}
              </el-descriptions-item>
              <el-descriptions-item label="承租方签署">
                {{ contractInfo.memberName }}
              </el-descriptions-item>
              <el-descriptions-item label="合同状态">
                {{ contractInfo.contractStatus|contractStatus }}
              </el-descriptions-item>
            </el-descriptions>

            <iframe
              :src="rentContractUrl"
              frameborder="0"
              width="100%"
              class="mmv-car-wrap"
            ></iframe>
          </div>

        </el-card>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="info" plain @click.native="close">返回</el-button>
        </div>
      </template>
    </CustomContent>

  </div>
</template>

<script>
import CustomContent from '@/components/custom/content.vue'
import {contractDetail, updateContractStatus} from "@/api/contract/contract";
import {contractType} from "@/utils/filters";

export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {CustomContent},
  dicts: ['contract_status'],
  props: {},
  data() {
    // 这里存放数据
    return {
      baseUrl: 'https://view.officeapps.live.com/op/view.aspx?src=' + process.env.VUE_APP_BASE_IMAGE_URL,
      pdfUrl:process.env.VUE_APP_BASE_IMAGE_URL,
      contractInfo: {},
    }
  },
  // 计算属性 类似于 data 概念
  computed: {
    rentContractUrl() {
      let rentContractUrl = null;
      if (this.contractInfo.contractSource){
        const contractFileAddress = this.contractInfo.contractFileAddress;
        let containerStr=new RegExp("https");
        const isHttp = containerStr.test(contractFileAddress);
        if (isHttp) {
          rentContractUrl = contractFileAddress;
        }else  {
          const sourceUrl = this.contractInfo.contractSource == 2? this.pdfUrl : this.baseUrl;
          rentContractUrl = sourceUrl + encodeURIComponent(this.contractInfo.contractFileAddress);
        }
      }
      return rentContractUrl;
    }
  },
  // 方法集合
  methods: {
    contractType,
    getContractDetail() {
      contractDetail(this.$route.query.contractId).then(res => {
        this.contractInfo = res.data;
      })
    },
    /*操作按钮点击事件*/
    handleOperate(type) {
      const currentId = this.contractInfo.id;
      switch (type) {
        case 2://出租方签署
          this.updateContractStatus(currentId, 1, '确定发起合同签署吗?');
          break
        case 3://承租方签署
          this.updateContractStatus(currentId, 2, '确定发起合同签署吗?');
          break
        case 0://废弃
          this.updateContractStatus(currentId, 0, '确定废弃合同吗？');
          break

        default:
          console.log('未知')
          break
      }
    },

    /*修改状态*/
    updateContractStatus(contractId,status, msg) {

      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        updateContractStatus({
          id : contractId,
          contractStatus : status
        }).then(res=>{
          this.getContractDetail();
        })
      })


    },
    close() {
      this.$router.back();
    }
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
    this.getContractDetail();
  },

}
</script>

<style lang="scss" scoped>
.mmv-car-wrap {
  width: 100%;
  height: calc(100vh - 320px);
  // height: 500px;
  overflow-y: scroll;
  padding-right: 10px;
}

.cardHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .cardTitle {
    color: #333333;
    font-weight: bold;
    font-size: 16px;

    &::before {
      display: inline-block;
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: #5473E8;
      margin-right: 4px;
    }
  }

}

</style>
